<script setup>
import { useOpenlayers } from '@/componentApi/useOpenlayers.js'
import reactDom from 'react-dom';
const { state: myState, toPoint, initMap, initPointsLayer, addPoint, delPoint, cleartPointsLayer, addLine, initLinesLayer, clearLinesLayer } = useOpenlayers()

import { onMounted, reactive, watch } from 'vue'


const state = reactive({
    pointList: [{
        points: [111.7277312, 40.8843203],
        name: '点位1',
        id: 1
    }, {
        points: [111.7277412, 40.7143503],
        name: '点位2',
        id: 2
    }, {
        points: [111.7279412, 40.6141503],
        name: '点位3',
        id: 3
    }, {
        points: [111.7157412, 40.5113503],
        name: '点位4',
        id: 4
    }],
    selectValue: '',
    selectShow: false,
    lineState: false
})
// 实时灯态_pointsLayer--1
const pointsLayer_1 = {
    layer: null,
    source: null,
    config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 5
    }
}
const linesLayer = {
    layer: null,
    source: null,
    config: {
        minZoom: 1,
        maxZoom: 18,
        zIndex: 5
    }
}
const createMap = () => {
    initMap('map_container')
    initPointsLayer(pointsLayer_1)
}

const addChange = () => {
    state.selectShow = true
    state.pointList.forEach(item => {
        addPoint(item, pointsLayer_1, { scale: 0.6, anchor: [0.5, 1] })
    })
}

const pointLink = () => {
    const data = state.pointList.find(i => i.id === state.selectValue)
    toPoint(data.points)
}

const clearPoint = () => {
    state.selectShow = false
    cleartPointsLayer(pointsLayer_1)
}

const clickAddLine = () => {
    state.lineState = true
    initLinesLayer(linesLayer)

    const line = [[111.7157412, 40.5113503], [111.7279412, 40.6141503], [111.7277412, 40.7143503], [111.7277312, 40.8843203]]
    // state.pointList.forEach(item => {
    addLine(line, linesLayer, '#d0e7ff', 5)
    // })
}

const clearLine = () => {
    state.lineState = false
    clearLinesLayer(linesLayer)
}
onMounted(() => {
    createMap()

})
watch(() => myState.currentFeature, () => {

}, { deep: true })
</script>

<template>
    <div style="display: flex; margin-bottom: 10px;">
        <el-button type="primary" @click="addChange">添加点</el-button>
        <div style="width: 200px; margin: 0 10px;" v-if="state.selectShow">
            <el-select v-model="state.selectValue" placeholder="请选跳转点位" style="width: 200px" @change="pointLink">
                <el-option v-for="item in state.pointList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </div>
        <el-button type="danger" @click="clearPoint" v-if="state.selectShow">删除点</el-button>
        <el-button type="primary" @click="clickAddLine">添加线</el-button>
        <el-button type="primary" @click="clearLine" v-if="state.lineState">删除线</el-button>
    </div>
    <div id="map_container" style=" width: 100%;
    height: 100%;"></div>
</template>

<style scoped></style>
